<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饮食记录 - 营养健康管理系统</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-green-600 text-white shadow-lg">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <svg class="h-10 w-10 mr-3" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="45" fill="#4CAF50" />
                    <text x="50" y="55" font-size="20" text-anchor="middle" fill="white">营养</text>
                    <path d="M30,70 Q50,90 70,70" stroke="white" stroke-width="3" fill="none" />
                </svg>
                <h1 class="text-xl font-bold">营养健康管理系统</h1>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="../index.html" class="hover:text-green-200">首页</a>
                <a href="food-analysis.html" class="hover:text-green-200">食品分析</a>
                <a href="health-profile.html" class="hover:text-green-200">健康档案</a>
                <a href="diet-records.html" class="hover:text-green-200 border-b-2 border-white">饮食记录</a>
                <a href="nutrition-knowledge.html" class="hover:text-green-200">营养知识</a>
            </div>
            <div class="flex items-center space-x-4">
                <a href="login.html" class="hover:text-green-200">登录</a>
                <a href="register.html" class="bg-white text-green-600 px-4 py-2 rounded-lg hover:bg-green-100">注册</a>
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <div class="bg-green-500 text-white py-8">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold">饮食记录</h2>
            <p class="mt-2">记录您的饮食情况，追踪营养摄入</p>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧：添加饮食记录 -->
            <div class="lg:col-span-1">
                <div class="bg-white p-6 rounded-lg shadow-md mb-6">
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">添加饮食记录</h3>
                    
                    <form id="diet-record-form">
                        <div class="form-group mb-4">
                            <label for="meal-date" class="form-label">日期</label>
                            <input type="date" id="meal-date" class="form-input" required>
                        </div>
                        
                        <div class="form-group mb-4">
                            <label for="meal-time" class="form-label">时间</label>
                            <input type="time" id="meal-time" class="form-input" required>
                        </div>
                        
                        <div class="form-group mb-4">
                            <label for="meal-type" class="form-label">餐次</label>
                            <select id="meal-type" class="form-input" required>
                                <option value="">请选择</option>
                                <option value="BREAKFAST">早餐</option>
                                <option value="LUNCH">午餐</option>
                                <option value="DINNER">晚餐</option>
                                <option value="SNACK">零食</option>
                            </select>
                        </div>
                        
                        <div class="form-group mb-4">
                            <label class="form-label">食品</label>
                            <div class="space-y-2" id="food-items-container">
                                <div class="flex items-center space-x-2">
                                    <input type="text" class="form-input flex-grow" placeholder="搜索或输入食品名称">
                                    <input type="number" class="form-input w-20" placeholder="克数" min="1">
                                    <button type="button" class="bg-red-500 text-white p-1 rounded hover:bg-red-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                            <button type="button" id="add-food-item" class="mt-2 text-green-600 hover:text-green-800 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                                </svg>
                                添加食品
                            </button>
                        </div>
                        
                        <div class="form-group mb-4">
                            <label for="notes" class="form-label">备注</label>
                            <textarea id="notes" class="form-input" rows="2" placeholder="添加备注信息"></textarea>
                        </div>
                        
                        <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 w-full">保存记录</button>
                    </form>
                </div>
            </div>
            
            <!-- 右侧：饮食记录和营养摄入 -->
            <div class="lg:col-span-2">
                <!-- 日期选择器 -->
                <div class="bg-white p-4 rounded-lg shadow-md mb-6 flex items-center justify-between">
                    <button class="text-green-600 hover:text-green-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                    </button>
                    <div class="text-center">
                        <h3 class="text-lg font-semibold">2025年3月25日</h3>
                        <p class="text-sm text-gray-500">星期二</p>
                    </div>
                    <button class="text-green-600 hover:text-green-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                </div>
                
                <!-- 营养摄入概览 -->
                <div class="bg-white p-6 rounded-lg shadow-md mb-6">
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">今日营养摄入</h3>
                    
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                        <div class="bg-green-50 p-4 rounded-lg text-center">
                            <p class="text-sm text-gray-500">卡路里</p>
                            <p class="text-xl font-bold text-green-600">1,450</p>
                            <p class="text-xs text-gray-500">目标: 2,000</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-lg text-center">
                            <p class="text-sm text-gray-500">蛋白质</p>
                            <p class="text-xl font-bold text-green-600">65g</p>
                            <p class="text-xs text-gray-500">目标: 75g</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-lg text-center">
                            <p class="text-sm text-gray-500">碳水</p>
                            <p class="text-xl font-bold text-green-600">180g</p>
                            <p class="text-xs text-gray-500">目标: 250g</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-lg text-center">
                            <p class="text-sm text-gray-500">脂肪</p>
                            <p class="text-xl font-bold text-green-600">48g</p>
                            <p class="text-xs text-gray-500">目标: 65g</p>
                        </div>
                    </div>
                </div>
                
                <!-- 饮食记录列表 -->
                <div class="space-y-6">
                    <!-- 早餐 -->
                    <div class="bg-white p-6 rounded-lg shadow-md">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-semibold text-gray-800">早餐</h3>
                            <span class="text-sm text-gray-500">07:30</span>
                        </div>
                        
                        <div class="space-y-3">
                            <div class="flex justify-between items-center pb-2 border-b border-gray-100">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gray-200 rounded-lg mr-3"></div>
                                    <div>
                                        <p class="font-medium">全麦面包</p>
                                        <p class="text-sm text-gray-500">2片 (80g)</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium">180 kcal</p>
                                    <p class="text-sm text-gray-500">碳水: 30g</p>
                                </div>
                            </div>
                            
                            <div class="flex justify-between items-center pb-2 border-b border-gray-100">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gray-200 rounded-lg mr-3"></div>
                                    <div>
                                        <p class="font-medium">鸡蛋</p>
                                        <p class="text-sm text-gray-500">2个 (100g)</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium">155 kcal</p>
                                    <p class="text-sm text-gray-500">蛋白质: 13g</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4 pt-3 border-t border-gray-200 flex justify-between">
                            <p class="font-medium">总计</p>
                            <p class="font-medium">335 kcal</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-green-800 text-white py-10 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">关于我们</h3>
                    <p class="text-green-200">营养健康管理系统致力于通过先进技术帮助用户了解食品营养成分，提供个性化健康建议。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2 text-green-200">
                        <li><a href="../index.html" class="hover:text-white">首页</a></li>
                        <li><a href="food-analysis.html" class="hover:text-white">食品分析</a></li>
                        <li><a href="health-profile.html" class="hover:text-white">健康档案</a></li>
                        <li><a href="diet-records.html" class="hover:text-white">饮食记录</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-green-200">
                        <li>邮箱：contact@nutrition-health.com</li>
                        <li>电话：400-123-4567</li>
                        <li>地址：北京市海淀区中关村大街1号</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-green-700 mt-8 pt-6 text-center text-green-300">
                <p>&copy; 2025 营养健康管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="../js/main.js"></script>
</body>
</html>
